<template>
	<div class="audio-manage-container">
		<el-container>
			<!-- 头部工具栏 -->
			<el-header class="header-toolbar">
				<div class="toolbar-left">
					<h2 class="room-title">{{currentRoom.name}} - 音频管理</h2>
					<el-tag type="info" size="small">{{totalAudioCount}}个音频文件</el-tag>
				</div>
				<div class="toolbar-actions">
					<!-- 批量删除按钮，仅在有选中项时显示 -->
					<el-button v-if="selectedAudios.length > 0" 
						type="danger" 
						icon="el-icon-delete" 
						@click="batchDeleteAudios"
						:disabled="selectedAudios.length === 0">
						删除选中项 ({{selectedAudios.length}})
					</el-button>
					<!-- 真实删除按钮，仅在有选中项时显示 -->
					<el-button v-if="selectedAudios.length > 0" 
						type="danger" 
						icon="el-icon-warning-outline" 
						@click="realDeleteAudios"
						:disabled="selectedAudios.length === 0"
						class="real-delete-btn">
						真实删除 ({{selectedAudios.length}})
					</el-button>
					<el-button type="primary" icon="el-icon-upload2" @click="uploadAudio">
						上传音频
					</el-button>
					<el-button type="success" icon="el-icon-folder-add" @click="createFolder">
						新建文件夹
					</el-button>
					<el-button type="info" icon="el-icon-refresh" @click="refreshFolderStats" size="medium">
						刷新统计
					</el-button>
					<el-button type="warning" icon="el-icon-setting" @click="testQiniuConnection" size="medium">
						测试七牛云
					</el-button>
				</div>
			</el-header>

		<!-- 面包屑导航 -->
			<div class="breadcrumb-nav">
				<el-breadcrumb separator="/">
					<el-breadcrumb-item @click.native="goToFolder('')" class="breadcrumb-clickable">
						<i class="el-icon-house"></i> 根目录
					</el-breadcrumb-item>
					<el-breadcrumb-item v-for="(folder, index) in breadcrumbs" :key="index" 
						@click.native="goToFolder(folder.path)" class="breadcrumb-clickable">
						{{folder.name}}
					</el-breadcrumb-item>
				</el-breadcrumb>
			</div>

			<!-- 主体内容 -->
			<el-main class="main-content">
			<!-- 文件夹列表 -->
				<div v-if="currentFolders.length > 0" class="folder-section">
					<div class="section-header">
						<h3><i class="el-icon-folder"></i> 文件夹 ({{currentFolders.length}})</h3>
					</div>
					<el-row :gutter="20" class="folder-grid">
						<el-col :span="6" v-for="folder in currentFolders" :key="folder.id">
							<el-card class="folder-card" shadow="hover" 
								@click.native="enterFolder(folder)"
								@contextmenu.prevent.native="showFolderContextMenu($event, folder)">
								<div class="folder-content">
									<i class="el-icon-folder folder-icon"></i>
									<div class="folder-info">
										<div class="folder-name" @dblclick.stop="editFolder(folder)" title="双击可重命名">
											{{folder.name}}
										</div>
										<div class="folder-count">{{folder.audio_count || 0}}个音频</div>
									</div>
									<!-- 操作按钮组 -->
									<div class="folder-actions">
										<el-button-group>
											<el-button type="primary" icon="el-icon-edit" size="mini" 
												@click.stop="editFolder(folder)" title="重命名">
											</el-button>
											<el-button type="danger" icon="el-icon-delete" size="mini" 
												@click.stop="deleteFolder(folder)" title="删除">
											</el-button>
										</el-button-group>
									</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>

				<!-- 音频文件表格 -->
				<div v-if="currentAudios.length > 0" class="audio-section">
					<div class="section-header">
						<h3><i class="el-icon-headset"></i> 音频文件 ({{currentAudios.length}})</h3>
						<div class="view-actions">
							<!-- 多选操作按钮 -->
							<div v-if="currentAudios.length > 0" class="selection-actions">
								<el-button 
									v-if="selectedAudios.length < currentAudios.length" 
									type="text" 
									size="small" 
									@click="selectAllAudios">
									全选
								</el-button>
								<el-button 
									v-if="selectedAudios.length > 0" 
									type="text" 
									size="small" 
									@click="clearSelection">
									取消选中
								</el-button>
							</div>
							<el-radio-group v-model="viewMode" size="small">
								<el-radio-button label="table">表格视图</el-radio-button>
								<el-radio-button label="grid">网格视图</el-radio-button>
							</el-radio-group>
						</div>
					</div>

					<!-- 表格视图 -->
					<el-table v-if="viewMode === 'table'" 
						:data="currentAudios" 
						class="audio-table"
						@row-contextmenu="showAudioContextMenu"
						@row-dblclick="playAudio"
						@selection-change="handleSelectionChange">
						<!-- 多选框列 -->
						<el-table-column type="selection" width="55" align="center"></el-table-column>
						<el-table-column width="100">
							<template slot-scope="scope">
								<el-button :type="isPlaying && currentPlayingId === scope.row.id ? 'warning' : 'success'" 
									size="small"
									class="play-button-text"
									@click="playAudio(scope.row)">
									{{isPlaying && currentPlayingId === scope.row.id ? '暂停' : '播放'}}
								</el-button>
							</template>
						</el-table-column>
						<el-table-column label="音频名称" prop="name" min-width="200">
							<template slot-scope="scope">
								<div class="audio-name-cell">
									<i class="el-icon-headset audio-icon"></i>
									<span>{{scope.row.display_name || scope.row.name}}</span>
									<el-tag v-if="isPlaying && currentPlayingId === scope.row.id" 
										type="success" size="mini" class="playing-tag">播放中</el-tag>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="所属文件夹" width="120" align="center">
							<template slot-scope="scope">
								<el-tag type="info" size="small">{{scope.row.folder_name || '根目录'}}</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="时长" width="100" align="center">
							<template slot-scope="scope">
								{{scope.row.formatted_duration || formatDuration(scope.row.duration)}}
							</template>
						</el-table-column>
						<el-table-column label="大小" width="100" align="center">
							<template slot-scope="scope">
								{{scope.row.formatted_size || formatSize(scope.row.file_size)}}
							</template>
						</el-table-column>
						<el-table-column label="上传时间" width="120" align="center">
							<template slot-scope="scope">
								{{formatDate(scope.row.create_time)}}
							</template>
						</el-table-column>
						<el-table-column label="操作" width="200" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-edit" @click="renameAudio(scope.row)" size="medium" class="action-btn">重命名</el-button>
								<el-button type="text" icon="el-icon-folder" @click="moveAudio(scope.row)" size="medium" class="action-btn">移动</el-button>
								<el-button type="text" icon="el-icon-delete" @click="deleteAudio(scope.row)" 
									size="medium" class="danger-btn action-btn">删除</el-button>
							</template>
						</el-table-column>
					</el-table>

				<!-- 网格视图 -->
					<el-row v-if="viewMode === 'grid'" :gutter="20" class="audio-grid">
						<el-col :span="6" v-for="audio in currentAudios" :key="audio.id">
							<el-card class="audio-card" shadow="hover" 
								:class="{ 'selected': isAudioSelected(audio) }"
								@click.native="toggleAudioSelection(audio)"
								@contextmenu.prevent.native="showAudioContextMenu(audio, $event)">
								<div class="audio-cover">
									<!-- 选择框 -->
									<el-checkbox 
										:value="isAudioSelected(audio)"
										@change="toggleAudioSelection(audio)"
										@click.native.stop
										class="grid-checkbox">
									</el-checkbox>
									<i class="el-icon-headset cover-icon"></i>
									<el-tag v-if="isPlaying && currentPlayingId === audio.id" 
										type="success" size="mini" class="playing-badge">播放中</el-tag>
									<div class="card-overlay">
										<el-button :type="isPlaying && currentPlayingId === audio.id ? 'warning' : 'success'" 
											@click.stop="playAudio(audio)"
											size="small"
											class="grid-play-btn">
											{{isPlaying && currentPlayingId === audio.id ? '暂停' : '播放'}}
										</el-button>
									</div>
								</div>
								<div class="card-info">
									<div class="card-name">{{audio.display_name || audio.name}}</div>
									<div class="card-folder">
										<el-tag type="info" size="mini">{{audio.folder_name || '根目录'}}</el-tag>
									</div>
									<div class="card-meta">{{audio.formatted_duration || formatDuration(audio.duration)}} · {{audio.formatted_size || formatSize(audio.file_size)}}</div>
								</div>
							</el-card>
						</el-col>
					</el-row>
				</div>

			<!-- 空状态 -->
				<el-empty v-if="currentFolders.length === 0 && currentAudios.length === 0" 
					description="此文件夹为空" class="empty-state">
					<el-button type="primary" @click="uploadAudio">上传音频</el-button>
					<el-button @click="createFolder">新建文件夹</el-button>
				</el-empty>
			</el-main>
		</el-container>

		<!-- 底部播放器 -->
		<div v-if="currentPlayingAudio" class="mini-player">
			<div class="player-info">
				<i class="el-icon-headset"></i>
				<div class="player-text">
					<div class="player-name">{{currentPlayingAudio.name}}</div>
					<div class="player-progress">{{formatTime(currentTime)}} / {{formatTime(currentPlayingAudio.duration)}}</div>
				</div>
			</div>
			<div class="player-controls">
				<el-button :type="isPlaying ? 'warning' : 'success'" @click="togglePlay" 
					size="medium" class="player-control-btn-text">
					{{isPlaying ? '暂停' : '播放'}}
				</el-button>
				<el-button type="info" @click="stopPlay" 
					size="medium" class="player-control-btn-text">
					停止
				</el-button>
			</div>
		</div>

		<!-- 文件夹操作弹窗 -->
		<el-dialog :title="editingFolder ? '重命名文件夹' : '新建文件夹'" 
			:visible.sync="folderModalVisible" width="500px" center>
			<el-form :model="folderForm" label-width="100px">
				<el-form-item label="文件夹名称" required>
					<el-input v-model="folderForm.name" 
						placeholder="请输入文件夹名称" 
						clearable
						maxlength="50"
						show-word-limit
						@keyup.enter.native="saveFolder">
					</el-input>
					<div class="form-tip">
						<i class="el-icon-info"></i>
						不能包含特殊字符：\ / : * ? " &lt; &gt; |
					</div>
				</el-form-item>
				<el-form-item label="所在位置">
					<el-tag type="info">{{getCurrentPath()}}</el-tag>
				</el-form-item>
			</el-form>
			<div slot="footer">
				<el-button @click="closeFolderModal">取消</el-button>
				<el-button type="primary" @click="saveFolder" :disabled="!folderForm.name.trim()">
					{{editingFolder ? '保存' : '创建'}}
				</el-button>
			</div>
		</el-dialog>

		<!-- 移动文件弹窗 -->
		<el-dialog title="移动到文件夹" :visible.sync="moveModalVisible" width="600px" center>
			<div class="move-info">
				<el-alert :title="`移动音频: ${movingAudio ? movingAudio.name : ''}`" type="info" :closable="false" show-icon></el-alert>
			</div>
			<div class="folder-tree">
				<el-tree :data="folderTreeData" 
					:props="treeProps"
					:default-checked-keys="[moveTargetPath]"
					show-checkbox
					check-strictly
					@check="handleTreeCheck">
				</el-tree>
			</div>
			<div slot="footer">
				<el-button @click="closeMoveModal">取消</el-button>
				<el-button type="primary" @click="confirmMove">确认移动</el-button>
			</div>
		</el-dialog>

		<!-- 右键菜单 -->
		<el-dialog :visible.sync="contextMenuVisible" 
			:show-close="false" 
			:modal="false"
			width="180px"
			:style="{position: 'absolute', left: contextMenuX + 'px', top: contextMenuY + 'px', margin: 0}"
			custom-class="context-menu">
			<el-menu>
				<el-menu-item v-for="item in contextMenuItems" :key="item.command" 
					@click="handleContextMenu(item.command)">
					<i :class="item.icon"></i>
					{{item.label}}
				</el-menu-item>
			</el-menu>
		</el-dialog>

		<!-- 真实删除确认弹窗 -->
		<el-dialog title="⚠️ 危险操作：永久删除确认" 
			:visible.sync="realDeleteModalVisible" 
			width="600px" 
			:close-on-click-modal="true"
			:close-on-press-escape="true"
			:show-close="false"
			top="5vh"
			center>
			<div class="real-delete-warning">
				<div class="warning-icon">
					<i class="el-icon-warning-outline"></i>
				</div>
				<div class="warning-content">
					<h3>您即将执行不可逆的删除操作！</h3>
					<div class="warning-details">
						<p><strong>删除内容：</strong>{{selectedAudios.length}} 个音频文件</p>
						<p><strong>影响范围：</strong></p>
						<ul>
							<li>🗄️ 数据库中的音频记录将被永久删除</li>
							<li>☁️ 七牛云存储中的音频文件将被永久删除</li>
							<li>🔄 此操作无法撤销，无法恢复</li>
							<li>📝 相关的播放记录和配置也会被清除</li>
						</ul>
						<div class="danger-notice">
							<i class="el-icon-warning"></i>
							<span>删除后的文件无法通过任何技术手段找回！</span>
						</div>
					</div>
				</div>
			</div>
			
			<el-form :model="realDeleteForm" label-width="120px" class="real-delete-form">
				<el-form-item label="确认输入" required>
					<el-input 
						v-model="realDeleteForm.confirmText" 
						placeholder="请输入下方的确认文字"
						clearable
						maxlength="50"
						@keyup.enter.native="confirmRealDelete">
					</el-input>
					<div class="confirm-text-display">
						<strong>请完整输入：</strong>
						<code>{{realDeleteForm.requiredText}}</code>
					</div>
					<div class="input-status" 
						:class="realDeleteForm.confirmText.trim() === realDeleteForm.requiredText ? 'status-valid' : 'status-invalid'">
						<i :class="realDeleteForm.confirmText.trim() === realDeleteForm.requiredText ? 'el-icon-success' : 'el-icon-warning'"></i>
						<span>
							{{realDeleteForm.confirmText.trim() === realDeleteForm.requiredText ? '确认文字正确' : '请输入正确的确认文字'}}
						</span>
					</div>
				</el-form-item>
			</el-form>

			<div slot="footer" class="real-delete-footer">
				<div class="footer-warning">
					<i class="el-icon-info"></i>
					<span>删除操作将在确认后立即执行</span>
				</div>
				<div class="footer-buttons">
					<el-button @click="cancelRealDelete" size="medium">
						取消操作
					</el-button>
					<el-button 
						type="danger" 
						@click="confirmRealDelete" 
						:disabled="realDeleteForm.confirmText.trim() !== realDeleteForm.requiredText"
						size="medium"
						class="danger-confirm-btn">
						<i class="el-icon-warning-outline"></i>
						确认永久删除
					</el-button>
				</div>
			</div>
		</el-dialog>

		<!-- 删除进度弹窗 -->
		<el-dialog title="真实删除进度" 
			:visible.sync="deleteModalVisible" 
			width="800px" 
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			center>
			<!-- 删除统计信息 -->
			<div class="delete-stats">
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="stat-item">
							<div class="stat-number">{{deleteStats.total}}</div>
							<div class="stat-label">总文件数</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stat-item completed">
							<div class="stat-number">{{deleteStats.completed}}</div>
							<div class="stat-label">已完成</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stat-item deleting">
							<div class="stat-number">{{deleteStats.deleting}}</div>
							<div class="stat-label">删除中</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stat-item failed">
							<div class="stat-number">{{deleteStats.failed}}</div>
							<div class="stat-label">失败</div>
						</div>
					</el-col>
				</el-row>
			</div>

			<!-- 删除控制按钮 -->
			<div class="delete-controls">
				<el-button v-if="!deletePaused && deleteStats.deleting > 0" 
					type="warning" 
					icon="el-icon-video-pause" 
					@click="pauseDelete">
					暂停删除
				</el-button>
				<el-button v-if="deletePaused" 
					type="success" 
					icon="el-icon-video-play" 
					@click="resumeDelete">
					继续删除
				</el-button>
				<el-button v-if="deleteStats.failed > 0" 
					type="primary" 
					icon="el-icon-refresh" 
					@click="retryFailedDeletes">
					重试失败项
				</el-button>
				<el-button type="danger" 
					icon="el-icon-close" 
					@click="cancelDelete">
					取消删除
				</el-button>
			</div>

			<!-- 文件列表 -->
			<div class="delete-file-list">
				<el-table :data="deleteQueue" 
					height="400" 
					class="delete-table">
					<el-table-column label="文件名" min-width="200">
						<template slot-scope="scope">
							<div class="file-name-cell">
								<i class="el-icon-headset file-icon"></i>
								<span>{{scope.row.name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="文件夹" width="120" align="center">
						<template slot-scope="scope">
							<el-tag type="info" size="small">{{scope.row.folderName}}</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="大小" width="100" align="center">
						<template slot-scope="scope">
							{{formatSize(scope.row.size)}}
						</template>
					</el-table-column>
					<el-table-column label="状态" width="100" align="center">
						<template slot-scope="scope">
							<el-tag :type="getDeleteStatusType(scope.row.status)" size="small">
								{{getDeleteStatusText(scope.row.status)}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="删除进度" width="200" align="center">
						<template slot-scope="scope">
							<div class="delete-progress-cell">
								<el-progress 
									:percentage="Math.floor(scope.row.progress)" 
									:status="scope.row.status === 'completed' ? 'success' : 
										scope.row.status === 'failed' ? 'exception' : null"
									:show-text="false"
									class="single-progress">
								</el-progress>
								<span class="progress-text">{{Math.floor(scope.row.progress)}}%</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="100" align="center">
						<template slot-scope="scope">
							<el-button v-if="scope.row.status === 'failed' || scope.row.status === 'completed'" 
								type="text" 
								icon="el-icon-delete" 
								@click="removeDeleteItem(scope.row)"
								size="small">
								移除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 错误信息显示 -->
			<div v-if="deleteQueue.filter(item => item.status === 'failed').length > 0" class="error-list">
				<h4>失败文件详情：</h4>
				<el-collapse>
					<el-collapse-item v-for="item in deleteQueue.filter(item => item.status === 'failed')" 
						:key="item.id" 
						:title="item.name">
						<div class="error-detail">
							<el-alert :title="item.error" type="error" :closable="false"></el-alert>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>

			<div slot="footer" class="delete-modal-footer">
				<div class="footer-info">
					<span v-if="deleteStats.deleting > 0">
						<i class="el-icon-warning"></i>
						正在删除中，请勿关闭页面
					</span>
					<span v-else-if="deleteStats.completed > 0 && deleteStats.completed === deleteStats.total">
						<i class="el-icon-success"></i>
						所有文件删除完成！
					</span>
				</div>
				<el-button @click="deleteModalVisible = false" 
					:disabled="deleteStats.deleting > 0">
					{{deleteStats.deleting > 0 ? '删除中...' : '关闭'}}
				</el-button>
			</div>
		</el-dialog>

		<!-- 上传进度弹窗 -->
		<el-dialog title="音频上传进度" 
			:visible.sync="uploadModalVisible" 
			width="800px" 
			:close-on-click-modal="false"
			:close-on-press-escape="false"
			center>
			<!-- 上传统计信息 -->
			<div class="upload-stats">
				<el-row :gutter="20">
					<el-col :span="6">
						<div class="stat-item">
							<div class="stat-number">{{uploadStats.total}}</div>
							<div class="stat-label">总文件数</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stat-item completed">
							<div class="stat-number">{{uploadStats.completed}}</div>
							<div class="stat-label">已完成</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stat-item uploading">
							<div class="stat-number">{{uploadStats.uploading}}</div>
							<div class="stat-label">同时上传</div>
						</div>
					</el-col>
					<el-col :span="6">
						<div class="stat-item failed">
							<div class="stat-number">{{uploadStats.failed}}</div>
							<div class="stat-label">失败</div>
						</div>
					</el-col>
				</el-row>
			</div>

			<!-- 上传控制按钮 -->
			<div class="upload-controls">
				<el-button v-if="!uploadPaused && uploadStats.uploading > 0" 
					type="warning" 
					icon="el-icon-video-pause" 
					@click="pauseUpload">
					暂停上传
				</el-button>
				<el-button v-if="uploadPaused" 
					type="success" 
					icon="el-icon-video-play" 
					@click="resumeUpload">
					继续上传
				</el-button>
				<el-button v-if="uploadStats.failed > 0" 
					type="primary" 
					icon="el-icon-refresh" 
					@click="retryFailedUploads">
					重试失败项
				</el-button>
				<el-button type="danger" 
					icon="el-icon-close" 
					@click="cancelUpload">
					取消上传
				</el-button>
			</div>

			<!-- 文件列表 -->
			<div class="upload-file-list">
				<el-table :data="uploadQueue" 
					height="400" 
					class="upload-table">
					<el-table-column label="文件名" min-width="200">
						<template slot-scope="scope">
							<div class="file-name-cell">
								<i class="el-icon-headset file-icon"></i>
								<span>{{scope.row.name}}</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="大小" width="100" align="center">
						<template slot-scope="scope">
							{{formatSize(scope.row.size)}}
						</template>
					</el-table-column>
					<el-table-column label="状态" width="100" align="center">
						<template slot-scope="scope">
							<el-tag :type="getUploadStatusType(scope.row.status)" size="small">
								{{getUploadStatusText(scope.row.status)}}
							</el-tag>
						</template>
					</el-table-column>
					<el-table-column label="进度" width="200" align="center">
						<template slot-scope="scope">
							<div class="progress-cell">
								<el-progress 
									:percentage="Math.floor(scope.row.progress)" 
									:status="scope.row.status === 'completed' ? 'success' : 
										scope.row.status === 'failed' ? 'exception' : null"
									:show-text="false">
								</el-progress>
								<span class="progress-text">{{Math.floor(scope.row.progress)}}%</span>
							</div>
						</template>
					</el-table-column>
					<el-table-column label="操作" width="100" align="center">
						<template slot-scope="scope">
							<el-button v-if="scope.row.status === 'failed' || scope.row.status === 'completed'" 
								type="text" 
								icon="el-icon-delete" 
								@click="removeUploadItem(scope.row)"
								size="small">
								移除
							</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>

			<!-- 错误信息显示 -->
			<div v-if="uploadQueue.filter(item => item.status === 'failed').length > 0" class="error-list">
				<h4>失败文件详情：</h4>
				<el-collapse>
					<el-collapse-item v-for="item in uploadQueue.filter(item => item.status === 'failed')" 
						:key="item.id" 
						:title="item.name">
						<div class="error-detail">
							<el-alert :title="item.error" type="error" :closable="false"></el-alert>
						</div>
					</el-collapse-item>
				</el-collapse>
			</div>

			<div slot="footer" class="upload-modal-footer">
				<div class="footer-info">
					<span v-if="uploadStats.uploading > 0">正在上传中，请勿关闭页面</span>
					<span v-else-if="uploadStats.completed > 0 && uploadStats.completed === uploadStats.total">
						所有文件上传完成！
					</span>
				</div>
				<el-button @click="uploadModalVisible = false" 
					:disabled="uploadStats.uploading > 0">
					{{uploadStats.uploading > 0 ? '上传中...' : '关闭'}}
				</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import audioApi from '@/api/audio.js'
	import { 
		showSuccess, 
		showError, 
		showWarning,
		showInfo,
		showLoading, 
		hideLoading, 
		showConfirm, 
		showInput,
		formatFileSize,
		formatDuration as utilFormatDuration,
		formatDate as utilFormatDate,
		handleError
	} from '@/utils/common.js'
	import { 
		getBatchAudioInfo, 
		validateAudioFormat, 
		formatDuration as formatAudioDuration 
	} from '@/utils/audioHelper.js'
	import { globalAudioPlayer, formatPlayTime, validateAudioUrl } from '@/utils/audioPlayer.js'
	
	export default {
		data() {
			return {
				// 当前房间
				currentRoom: {
					id: '1',
					name: '默认房间'
				},
				
				// 当前路径
				currentPath: '',
				
				// 视图模式
				viewMode: 'table', // table | grid
				
				// 文件结构数据
				fileStructure: {
					folders: [],
					audios: []
				},
				
				// 当前文件夹ID（后端需要）
				currentFolderId: null,

				// 播放状态
				isPlaying: false,
				currentPlayingId: null,
				currentPlayingAudio: null,
				currentTime: 0,

				// 表单数据
				editingFolder: null,
				folderForm: {
					name: ''
				},

				// 移动文件
				movingAudio: null,
				moveTargetPath: '',

				// 弹窗控制
				folderModalVisible: false,
				moveModalVisible: false,
				realDeleteModalVisible: false, // 真实删除确认弹窗
				realDeleteForm: {
					confirmText: '', // 用户输入的确认文字
					requiredText: '我已经知道删除的风险，无法找回，确认删除' // 必须输入的确认文字
				},

				// 右键菜单
				contextMenuVisible: false,
				contextMenuX: 0,
				contextMenuY: 0,
				contextMenuTarget: null,
				contextMenuItems: [],

				// 树形控件配置
				treeProps: {
					label: 'name',
					children: 'children',
					value: 'id'
				},

				// 多选相关
				selectedAudios: [], // 选中的音频列表
				
				// 上传队列相关
				uploadQueue: [], // 上传队列
				uploadingCount: 0, // 当前上传中的数量
				maxConcurrent: 3, // 最大并发上传数
				uploadModalVisible: false, // 上传进度弹窗
				uploadPaused: false, // 是否暂停上传
				uploadStats: {
					total: 0,
					completed: 0,
					failed: 0,
					uploading: 0,
					waiting: 0
				},

				// 删除队列相关
				deleteQueue: [], // 删除队列
				deletingCount: 0, // 当前删除中的数量
				maxDeleteConcurrent: 2, // 最大并发删除数（比上传少一些）
				deleteModalVisible: false, // 删除进度弹窗
				deletePaused: false, // 是否暂停删除
				deleteStats: {
					total: 0,
					completed: 0,
					failed: 0,
					deleting: 0,
					waiting: 0
				}
			}
		},
		computed: {
			// 面包屑导航
			breadcrumbs() {
				if (!this.currentPath) return [];
				
				const parts = this.currentPath.split('/');
				const crumbs = [];
				let currentPath = '';
				
				parts.forEach(part => {
					currentPath = currentPath ? `${currentPath}/${part}` : part;
					crumbs.push({
						name: part,
						path: currentPath
					});
				});
				
				return crumbs;
			},

			// 当前目录下的文件夹
			currentFolders() {
				return this.fileStructure.folders.filter(folder => 
					(folder.parent_id || null) === this.currentFolderId
				);
			},

			// 当前目录下的音频
			currentAudios() {
				return this.fileStructure.audios.filter(audio => 
					(audio.folder_id || null) === this.currentFolderId
				);
			},

			// 所有文件夹（用于移动时选择）
			allFolders() {
				return this.fileStructure.folders.filter(folder => 
					folder.id !== this.currentFolderId
				);
			},

			// 总音频数量
			totalAudioCount() {
				return this.fileStructure.audios.length;
			},

			// 文件夹树形数据
			folderTreeData() {
				const treeData = [{
					name: '根目录',
					id: null,
					children: []
				}];

				// 构建树形结构
				const buildTree = (parentId, parentNode) => {
					const children = this.fileStructure.folders.filter(folder => 
						(folder.parent_id || null) === parentId && folder.id !== this.currentFolderId
					);
					
					children.forEach(folder => {
						const node = {
							name: folder.name,
							id: folder.id,
							path: folder.path,
							children: []
						};
						parentNode.children.push(node);
						buildTree(folder.id, node);
					});
				};

				buildTree(null, treeData[0]);
				return treeData;
			}
		},
		onLoad(options) {
			if (options.roomId) {
				this.currentRoom.id = options.roomId;
			}
			this.setupAudioPlayer();
			this.loadData();
		},
		methods: {
			// 设置音频播放器
			setupAudioPlayer() {
				// 设置音频播放器事件监听
				globalAudioPlayer.onPlay(() => {
					this.isPlaying = true;
					console.log('音频开始播放');
				});

				globalAudioPlayer.onPause(() => {
					this.isPlaying = false;
					console.log('音频暂停播放');
				});

				globalAudioPlayer.onEnded(() => {
					this.isPlaying = false;
					this.currentTime = 0;
					this.currentPlayingId = null;
					this.currentPlayingAudio = null;
					showSuccess('播放完成');
					console.log('音频播放结束');
				});

				globalAudioPlayer.onError((error) => {
					this.isPlaying = false;
					// showError(error || '音频播放失败');
					console.error('音频播放错误:', error);
				});

				globalAudioPlayer.onTimeUpdate((currentTime, duration) => {
					this.currentTime = Math.floor(currentTime);
				});

				globalAudioPlayer.onLoaded((duration) => {
					console.log('音频加载完成，时长:', duration);
					// showInfo(`音频已加载，时长: ${Math.floor(duration)}秒`);
				});
			},

			// 加载数据
			async loadData() {
				try {
					showLoading('加载中...');
					
					// 清空当前选择
					this.selectedAudios = [];
					
					// 并行加载文件夹和音频数据
					const [folders, audios] = await Promise.all([
						audioApi.getFolders(this.currentRoom.id, this.currentFolderId),
						audioApi.getAudios(this.currentRoom.id, this.currentFolderId)
					]);
					
					this.fileStructure.folders = folders || [];
					this.fileStructure.audios = audios || [];
					
					hideLoading();
				} catch (error) {
					hideLoading();
					handleError(error, '加载数据失败');
				}
			},

			// 设置视图模式
			setViewMode(mode) {
				this.viewMode = mode;
			},

			// 进入文件夹
			enterFolder(folder) {
				this.currentFolderId = folder.id;
				this.currentPath = folder.path || '';
				this.loadData();
			},

			// 返回指定路径（通过面包屑）
			goToFolder(path) {
				// 根据路径找到对应的文件夹ID
				if (path === '') {
					this.currentFolderId = null;
					this.currentPath = '';
				} else {
					const folder = this.fileStructure.folders.find(f => f.path === path);
					if (folder) {
						this.currentFolderId = folder.id;
						this.currentPath = path;
					}
				}
				this.loadData();
			},

			// 获取当前路径显示
			getCurrentPath() {
				return this.currentPath || '根目录';
			},

			// 新建文件夹
			createFolder() {
				this.editingFolder = null;
				this.folderForm = { name: '' };
				this.folderModalVisible = true;
			},

			// 编辑文件夹
			editFolder(folder) {
				this.editingFolder = folder;
				this.folderForm = { name: folder.name };
				this.folderModalVisible = true;
			},

			// 关闭文件夹弹窗
			closeFolderModal() {
				this.folderModalVisible = false;
			},

			// 保存文件夹
			async saveFolder() {
				const folderName = this.folderForm.name.trim();
				
				// 验证文件夹名称
				if (!folderName) {
					showError('请输入文件夹名称');
					return;
				}
				
				if (folderName.length > 50) {
					showError('文件夹名称不能超过50个字符');
					return;
				}
				
				// 检查是否包含特殊字符
				const invalidChars = /[\\/:*?"<>|]/;
				if (invalidChars.test(folderName)) {
					showError('文件夹名称不能包含以下字符：\\ / : * ? " < > |');
					return;
				}

				try {
					// 显示保存状态
					showLoading(this.editingFolder ? '保存中...' : '创建中...');
					
					if (this.editingFolder) {
						// 编辑现有文件夹
						await audioApi.updateFolder(this.editingFolder.id, folderName);
						hideLoading();
						showSuccess('文件夹已更新');
					} else {
						// 创建新文件夹
						await audioApi.createFolder(
							this.currentRoom.id, 
							folderName, 
							this.currentFolderId
						);
						hideLoading();
						showSuccess('文件夹创建成功');
					}

					this.closeFolderModal();
					this.loadData(); // 重新加载数据
				} catch (error) {
					hideLoading();
					handleError(error, '保存文件夹失败');
				}
			},

			// 上传音频
			uploadAudio() {
				// 在 uni-app 中选择文件，支持选择大量文件
				uni.chooseFile({
					count: 1000, // 最多选择1000个文件
					type: 'file',
					success: async (res) => {
						console.log(res, '选择文件结果');
						
						// 先过滤出有效的音频文件
						const validFiles = res.tempFiles.filter(file => {
							return validateAudioFormat(file.name, ['mp3', 'wav', 'm4a', 'aac']);
						});
						
						if (validFiles.length === 0) {
							showError('请选择有效的音频文件（支持：mp3, wav, m4a, aac）');
							return;
						}
						
						try {
							// 显示分析中状态
							showLoading(`分析 ${validFiles.length} 个音频文件...`);
							
							// 获取音频文件的时长信息
							const filePaths = res.tempFilePaths.slice(0, validFiles.length);
							const audioInfoList = await getBatchAudioInfo(validFiles, filePaths);
							
							// 显示预览信息
							const totalDuration = audioInfoList.reduce((sum, info) => sum + info.duration, 0);
							const totalSize = audioInfoList.reduce((sum, info) => sum + info.size, 0);
							
							hideLoading();
							
							// 显示确认信息
							const confirmMessage = `准备上传 ${audioInfoList.length} 个音频文件
总时长：${formatAudioDuration(totalDuration)}
总大小：${formatFileSize(totalSize)}

将采用队列上传，最多同时上传3个文件。
是否继续上传？`;
							
							const confirmed = await showConfirm(confirmMessage, '确认上传');
							
							if (confirmed) {
								// 添加到上传队列
								this.addToUploadQueue(audioInfoList, validFiles, filePaths);
							}
							
						} catch (error) {
							hideLoading();
							handleError(error, '文件分析失败');
						}
					},
					fail: (error) => {
						console.error('选择文件失败:', error);
						showError('选择文件失败');
					}
				});
			},

			// 选择音频（已改为切换选择状态）
			selectAudio(audio) {
				// 该方法已由toggleAudioSelection替代
				this.toggleAudioSelection(audio);
			},

			// 编辑音频
			editAudio(audio) {
				// PC端使用右键菜单，这个方法可以简化或移除
				this.showAudioContextMenu(audio, { clientX: 0, clientY: 0, preventDefault: () => {} });
			},

			// 重命名音频
			async renameAudio(audio) {
				const originalName = audio.display_name || audio.name.replace(/\.[^/.]+$/, ""); // 去除扩展名
				
				try {
					const newName = await showInput('请输入新的音频名称', '重命名音频', originalName);
					
					await audioApi.renameAudio(audio.id, newName);
					showSuccess('重命名成功');
					
					// 重新加载数据
					this.loadData();
				} catch (error) {
					if (error !== null) { // 不是用户取消
						handleError(error, '重命名失败');
					}
				}
			},

			// 移动音频
			async moveAudio(audio) {
				this.movingAudio = audio;
				this.moveTargetPath = audio.folder_id;
				
				try {
					// 加载所有文件夹数据用于构建树形结构
					showLoading('加载文件夹列表...');
					const allFolders = await audioApi.getAllFolders(this.currentRoom.id);
					
					// 合并到现有数据，保持当前文件夹显示正常
					this.fileStructure.folders = allFolders || [];
					
					hideLoading();
					this.moveModalVisible = true;
				} catch (error) {
					hideLoading();
					handleError(error, '加载文件夹列表失败');
				}
			},

			// 选择移动目标
			selectMoveTarget(path) {
				this.moveTargetPath = path;
			},

			// 关闭移动弹窗
			closeMoveModal() {
				this.moveModalVisible = false;
			},

			// 确认移动
			async confirmMove() {
				if (this.movingAudio.folder_id === this.moveTargetPath) {
					showInfo('文件已在当前位置');
					return;
				}

				try {
					await audioApi.moveAudio(this.movingAudio.id, this.moveTargetPath);
					showSuccess('移动成功');
					
					this.closeMoveModal();
					this.loadData(); // 重新加载数据
				} catch (error) {
					handleError(error, '移动失败');
				}
			},

			// 删除音频
			async deleteAudio(audio) {
				try {
					await showConfirm(`确定要删除音频"${audio.name}"吗？`, '确认删除');
					
					await audioApi.deleteAudio(audio.id);
					
					// 如果正在播放该音频，停止播放
					if (this.currentPlayingId === audio.id) {
						this.stopPlay();
					}
					
					showSuccess('删除成功');
					
					// 重新加载数据
					this.loadData();
				} catch (error) {
					if (error !== false) { // 不是用户取消
						handleError(error, '删除失败');
					}
				}
			},

			// 播放音频
			async playAudio(audio) {
				// 验证音频URL
				if (!validateAudioUrl(audio.file_path)) {
					showWarning('无效的音频文件链接');
					return;
				}

				// 防止在加载过程中重复点击
				if (globalAudioPlayer.isLoading) {
					showInfo('音频正在加载中，请稍候...');
					return;
				}

				if (this.currentPlayingId === audio.id) {
					// 如果点击的是当前播放的音频，切换播放/暂停状态
					this.togglePlay();
				} else {
					// 切换到新的音频
					try {
						// 先停止当前播放，给一点时间让旧音频完全停止
						this.stopPlay();
						await new Promise(resolve => setTimeout(resolve, 100));
						
						this.currentPlayingId = audio.id;
						this.currentPlayingAudio = audio;
						this.currentTime = 0;
						
						// 加载并播放新音频
						showLoading('加载音频...');
						const loaded = await globalAudioPlayer.loadAudio(audio);
						hideLoading();
						
						if (loaded) {
							// 等待一小段时间确保音频完全加载
							await new Promise(resolve => setTimeout(resolve, 200));
							const played = await globalAudioPlayer.play();
							if (played) {
								// showSuccess(`开始播放：${audio.display_name || audio.name}`);
							} else {
								// 播放失败时重置状态
								this.currentPlayingId = null;
								this.currentPlayingAudio = null;
								this.currentTime = 0;
							}
						} else {
							// 加载失败时重置状态
							this.currentPlayingId = null;
							this.currentPlayingAudio = null;
							this.currentTime = 0;
						}
					} catch (error) {
						hideLoading();
						console.error('播放音频时出错:', error);
						showError('播放音频失败，请重试');
						
						// 出错时重置状态
						this.currentPlayingId = null;
						this.currentPlayingAudio = null;
						this.currentTime = 0;
					}
				}
			},

			// 切换播放状态
			togglePlay() {
				if (!globalAudioPlayer.audioContext) {
					showError('音频播放器未初始化');
					return;
				}
				
				if (this.isPlaying) {
					globalAudioPlayer.pause();
				} else {
					globalAudioPlayer.play();
				}
			},

			// 停止播放
			stopPlay() {
				globalAudioPlayer.stop();
				this.isPlaying = false;
				this.currentPlayingId = null;
				this.currentPlayingAudio = null;
				this.currentTime = 0;
			},

			// 格式化时长（使用工具函数）
			formatDuration(seconds) {
				return utilFormatDuration(seconds);
			},

			// 格式化文件大小（使用工具函数）
			formatSize(bytes) {
				return formatFileSize(bytes);
			},

			// 格式化日期（使用工具函数）
			formatDate(timestamp) {
				return utilFormatDate(timestamp);
			},

			// 格式化时间
			formatTime(seconds) {
				return formatPlayTime(seconds);
			},

			// 显示文件夹右键菜单
			showFolderContextMenu(event, folder) {
				event.preventDefault();
				this.contextMenuX = event.clientX;
				this.contextMenuY = event.clientY;
				this.contextMenuTarget = folder;
				this.contextMenuItems = [
					{ command: 'rename-folder', label: '重命名', icon: 'el-icon-edit' },
					{ command: 'delete-folder', label: '删除', icon: 'el-icon-delete' }
				];
				this.contextMenuVisible = true;
			},

			// 显示音频右键菜单
			showAudioContextMenu(row, event) {
				event.preventDefault();
				this.contextMenuX = event.clientX;
				this.contextMenuY = event.clientY;
				this.contextMenuTarget = row;
				this.contextMenuItems = [
					{ command: 'play-audio', label: '播放', icon: 'el-icon-video-play' },
					{ command: 'rename-audio', label: '重命名', icon: 'el-icon-edit' },
					{ command: 'move-audio', label: '移动', icon: 'el-icon-folder' },
					{ command: 'delete-audio', label: '删除', icon: 'el-icon-delete' }
				];
				this.contextMenuVisible = true;
			},

			// 处理右键菜单点击
			handleContextMenu(command) {
				this.contextMenuVisible = false;
				const target = this.contextMenuTarget;

				switch(command) {
					case 'rename-folder':
						this.editFolder(target);
						break;
					case 'delete-folder':
						this.deleteFolder(target);
						break;
					case 'play-audio':
						this.playAudio(target);
						break;
					case 'rename-audio':
						this.renameAudio(target);
						break;
					case 'move-audio':
						this.moveAudio(target);
						break;
					case 'delete-audio':
						this.deleteAudio(target);
						break;
				}
			},

			// 删除文件夹
			async deleteFolder(folder) {
				try {
					// 构建更详细的确认信息
					let confirmMessage = `确定要删除文件夹"${folder.name}"吗？`;
					if (folder.audio_count > 0) {
						confirmMessage = `文件夹"${folder.name}"中还有${folder.audio_count}个音频文件。\n请先清空文件夹或移动文件后再删除。`;
						showWarning(confirmMessage);
						return;
					}
					
					await showConfirm(confirmMessage + '\n\n此操作不可恢复！', '确认删除');
					
					// 显示删除中的状态
					showLoading('删除中...');
					
					await audioApi.deleteFolder(folder.id);
					
					hideLoading();
					showSuccess('文件夹已删除');
					
					// 重新加载数据
					this.loadData();
				} catch (error) {
					hideLoading();
					if (error !== false) { // 不是用户取消
						handleError(error, '删除文件夹失败');
					}
				}
			},

			// 处理树形控件选中
			handleTreeCheck(data, checkInfo) {
				this.moveTargetPath = data.id;
			},

			// 关闭移动弹窗
			closeMoveModal() {
				this.moveModalVisible = false;
				this.movingAudio = null;
			},

			// 处理表格选择变化
			handleSelectionChange(selection) {
				this.selectedAudios = selection;
			},

			// 批量删除音频（普通删除）
			async batchDeleteAudios() {
				if (this.selectedAudios.length === 0) {
					showWarning('请先选择要删除的音频');
					return;
				}

				try {
					const confirmMessage = `确定要删除选中的 ${this.selectedAudios.length} 个音频文件吗？\n\n此操作不可恢复！`;
					await showConfirm(confirmMessage, '批量删除确认');
					
					showLoading('删除中...');
					
					// 获取要删除的音频ID列表
					const audioIds = this.selectedAudios.map(audio => audio.id);
					
					// 检查是否有正在播放的音频需要停止
					const playingAudio = this.selectedAudios.find(audio => audio.id === this.currentPlayingId);
					if (playingAudio) {
						this.stopPlay();
					}
					
					// 调用批量删除API
					await audioApi.batchDeleteAudios(audioIds);
					
					hideLoading();
					showSuccess(`成功删除 ${this.selectedAudios.length} 个音频文件`);
					
					// 清空选择
					this.selectedAudios = [];
					
					// 重新加载数据
					this.loadData();
				} catch (error) {
					hideLoading();
					if (error !== false) { // 不是用户取消
						handleError(error, '批量删除失败');
					}
				}
			},

			// 真实删除音频（数据库和七牛云文件都删除）
			realDeleteAudios() {
				if (this.selectedAudios.length === 0) {
					showWarning('请先选择要删除的音频');
					return;
				}

				// 重置确认表单
				this.realDeleteForm.confirmText = '';
				
				// 显示真实删除确认弹窗
				this.realDeleteModalVisible = true;
			},

			// 确认真实删除
			confirmRealDelete() {
				// 验证用户输入的确认文字
				if (this.realDeleteForm.confirmText.trim() !== this.realDeleteForm.requiredText) {
					showError('请输入正确的确认文字才能继续删除操作');
					return;
				}

				// 检查是否有正在播放的音频需要停止
				const playingAudio = this.selectedAudios.find(audio => audio.id === this.currentPlayingId);
				if (playingAudio) {
					this.stopPlay();
				}

				// 关闭真实删除确认弹窗
				this.realDeleteModalVisible = false;

				// 添加到删除队列
				this.addToDeleteQueue(this.selectedAudios);

				// 清空选择
				this.selectedAudios = [];
			},

			// 取消真实删除
			cancelRealDelete() {
				this.realDeleteModalVisible = false;
				this.realDeleteForm.confirmText = '';
			},

			// 检查音频是否被选中（网格视图用）
			isAudioSelected(audio) {
				return this.selectedAudios.some(item => item.id === audio.id);
			},

			// 切换音频选择状态（网格视图用）
			toggleAudioSelection(audio) {
				const index = this.selectedAudios.findIndex(item => item.id === audio.id);
				if (index > -1) {
					// 已选中，取消选择
					this.selectedAudios.splice(index, 1);
				} else {
					// 未选中，添加选择
					this.selectedAudios.push(audio);
				}
			},

			// 全选当前页面的音频
			selectAllAudios() {
				this.selectedAudios = [...this.currentAudios];
			},

			// 清空选择
			clearSelection() {
				this.selectedAudios = [];
			},

			// 刷新文件夹音频统计
			async refreshFolderStats() {
				try {
					showLoading('正在刷新文件夹统计...');
					
					await audioApi.refreshFolderStats(this.currentRoom.id);
					
					hideLoading();
					showSuccess('文件夹统计已刷新');
					
					// 重新加载数据
					this.loadData();
				} catch (error) {
					hideLoading();
					handleError(error, '刷新统计失败');
				}
			},

			// 测试七牛云连接配置
			async testQiniuConnection() {
				try {
					showLoading('正在测试七牛云连接...');
					
					const result = await audioApi.testQiniuConnection();
					
					hideLoading();
					
					if (result && result.data) {
						const { bucket, domain, available_buckets } = result.data;
						let message = `✅ 七牛云连接测试成功！
						
🗂️ 当前存储空间：${bucket}
🌐 访问域名：${domain}
📦 可用存储空间：${available_buckets.join(', ')}

✨ 现在可以正常删除七牛云文件了！`;
						
						this.$alert(message, '七牛云连接测试结果', {
							confirmButtonText: '确定',
							type: 'success',
							customClass: 'qiniu-test-dialog'
						});
					} else {
						showSuccess('七牛云连接测试通过');
					}
				} catch (error) {
					hideLoading();
					
					// 显示详细的错误信息
					let errorMessage = '❌ 七牛云连接测试失败\n\n';
					
					if (error && error.message) {
						errorMessage += `错误信息：${error.message}\n\n`;
					}
					
					errorMessage += `🔧 可能的解决方案：
1. 检查七牛云 AccessKey 和 SecretKey 是否正确
2. 确认存储空间名称是否正确
3. 验证访问域名配置是否正确
4. 检查网络连接是否正常

⚠️ 在修复七牛云配置之前，真实删除功能将无法删除云端文件！`;
					
					this.$alert(errorMessage, '七牛云连接测试失败', {
						confirmButtonText: '确定',
						type: 'error',
						customClass: 'qiniu-test-dialog'
					});
				}
			},

			// ===== 上传队列管理方法 =====
			
			// 添加到上传队列
			addToUploadQueue(audioInfoList, validFiles, filePaths) {
				// 创建上传队列项
				const queueItems = audioInfoList.map((info, index) => ({
					id: Date.now() + index, // 唯一ID
					file: validFiles[index],
					path: filePaths[index],
					name: info.name,
					size: info.size,
					duration: info.duration,
					type: info.type,
					status: 'waiting', // waiting, uploading, completed, failed, paused
					progress: 0,
					error: null,
					roomId: this.currentRoom.id,
					folderId: this.currentFolderId
				}));
				
				// 添加到队列
				this.uploadQueue.push(...queueItems);
				
				// 更新统计
				this.updateUploadStats();
				
				// 显示上传进度弹窗
				this.uploadModalVisible = true;
				
				// 开始处理上传队列
				this.startUploadQueue();
			},
			
			// 开始处理上传队列
			startUploadQueue() {
				if (this.uploadPaused) return;
				
				// 检查是否有可以上传的文件
				const waitingFiles = this.uploadQueue.filter(item => item.status === 'waiting');
				const uploadingFiles = this.uploadQueue.filter(item => item.status === 'uploading');
				
				// 如果当前上传数量小于最大并发数，且有等待的文件
				while (uploadingFiles.length < this.maxConcurrent && waitingFiles.length > 0) {
					const fileToUpload = waitingFiles.shift();
					this.uploadSingleFile(fileToUpload);
					uploadingFiles.push(fileToUpload);
				}
				
				this.updateUploadStats();
			},
			
			// 上传单个文件
			async uploadSingleFile(queueItem) {
				try {
					// 更新状态为上传中
					queueItem.status = 'uploading';
					queueItem.progress = 0;
					this.uploadingCount++;
					this.updateUploadStats();
					
					// 准备上传数据
					const uploadData = [{
						file: queueItem.file,
						path: queueItem.path,
						name: queueItem.name,
						size: queueItem.size,
						duration: queueItem.duration,
						type: queueItem.type
					}];
					
					// 模拟上传进度（实际项目中应该从API获取真实进度）
					const progressInterval = setInterval(() => {
						if (queueItem.status === 'uploading' && queueItem.progress < 90) {
							queueItem.progress += Math.random() * 10;
							if (queueItem.progress > 90) queueItem.progress = 90;
						}
					}, 200);
					
					// 调用上传API
					const result = await audioApi.uploadAudioWithInfo(
						uploadData,
						queueItem.roomId,
						queueItem.folderId
					);
					
					// 清除进度更新
					clearInterval(progressInterval);
					
					// 上传成功
					queueItem.status = 'completed';
					queueItem.progress = 100;
					this.uploadingCount--;
					
				} catch (error) {
					// 上传失败
					queueItem.status = 'failed';
					queueItem.error = error.message || '上传失败';
					this.uploadingCount--;
					console.error('上传文件失败:', error);
				}
				
				// 更新统计
				this.updateUploadStats();
				
				// 继续处理队列中的下一个文件
				this.startUploadQueue();
				
				// 检查是否全部完成
				this.checkUploadComplete();
			},
			
			// 更新上传统计
			updateUploadStats() {
				this.uploadStats = {
					total: this.uploadQueue.length,
					completed: this.uploadQueue.filter(item => item.status === 'completed').length,
					failed: this.uploadQueue.filter(item => item.status === 'failed').length,
					uploading: this.uploadQueue.filter(item => item.status === 'uploading').length,
					waiting: this.uploadQueue.filter(item => item.status === 'waiting').length
				};
			},
			
			// 检查上传是否全部完成
			checkUploadComplete() {
				const { total, completed, failed } = this.uploadStats;
				
				if (completed + failed === total) {
					// 全部上传完成
					if (failed === 0) {
						showSuccess(`所有文件上传完成！共${completed}个文件`);
					} else {
						showWarning(`上传完成！成功${completed}个，失败${failed}个`);
					}
					
					// 重新加载数据
					this.loadData();
				}
			},
			
			// 暂停上传
			pauseUpload() {
				this.uploadPaused = true;
				// 将正在上传的文件标记为暂停
				this.uploadQueue.forEach(item => {
					if (item.status === 'uploading') {
						item.status = 'paused';
					}
				});
				this.uploadingCount = 0;
				this.updateUploadStats();
			},
			
			// 继续上传
			resumeUpload() {
				this.uploadPaused = false;
				// 将暂停的文件重新标记为等待
				this.uploadQueue.forEach(item => {
					if (item.status === 'paused') {
						item.status = 'waiting';
					}
				});
				this.updateUploadStats();
				this.startUploadQueue();
			},
			
			// 取消上传
			cancelUpload() {
				this.uploadPaused = true;
				this.uploadQueue = [];
				this.uploadingCount = 0;
				this.uploadModalVisible = false;
				this.updateUploadStats();
			},
			
			// 重试失败的上传
			retryFailedUploads() {
				this.uploadQueue.forEach(item => {
					if (item.status === 'failed') {
						item.status = 'waiting';
						item.progress = 0;
						item.error = null;
					}
				});
				this.updateUploadStats();
				this.startUploadQueue();
			},
			
			// 移除单个上传项
			removeUploadItem(queueItem) {
				const index = this.uploadQueue.findIndex(item => item.id === queueItem.id);
				if (index > -1) {
					this.uploadQueue.splice(index, 1);
					this.updateUploadStats();
				}
			},
			
			// 获取上传状态文本
			getUploadStatusText(status) {
				const statusMap = {
					waiting: '等待中',
					uploading: '上传中',
					completed: '已完成',
					failed: '失败',
					paused: '已暂停'
				};
				return statusMap[status] || status;
			},
			
			// 获取上传状态类型
			getUploadStatusType(status) {
				const typeMap = {
					waiting: 'info',
					uploading: 'warning',
					completed: 'success',
					failed: 'danger',
					paused: 'info'
				};
				return typeMap[status] || 'info';
			},

			// ===== 删除队列管理方法 =====
			
			// 添加到删除队列
			addToDeleteQueue(audioList) {
				// 创建删除队列项
				const queueItems = audioList.map(audio => ({
					id: Date.now() + Math.random(), // 唯一ID
					audioId: audio.id,
					name: audio.display_name || audio.name,
					size: audio.file_size,
					folderName: audio.folder_name || '根目录',
					status: 'waiting', // waiting, deleting, completed, failed, paused
					progress: 0, // 简化为单一进度
					error: null
				}));
				
				// 添加到队列
				this.deleteQueue.push(...queueItems);
				
				// 更新统计
				this.updateDeleteStats();
				
				// 显示删除进度弹窗
				this.deleteModalVisible = true;
				
				// 开始处理删除队列
				this.startDeleteQueue();
			},
			
			// 开始处理删除队列
			startDeleteQueue() {
				if (this.deletePaused) return;
				
				// 检查是否有可以删除的文件
				const waitingFiles = this.deleteQueue.filter(item => item.status === 'waiting');
				const deletingFiles = this.deleteQueue.filter(item => item.status === 'deleting');
				
				// 如果当前删除数量小于最大并发数，且有等待的文件
				while (deletingFiles.length < this.maxDeleteConcurrent && waitingFiles.length > 0) {
					const fileToDelete = waitingFiles.shift();
					this.deleteSingleFile(fileToDelete);
					deletingFiles.push(fileToDelete);
				}
				
				this.updateDeleteStats();
			},
			
			// 删除单个文件
			async deleteSingleFile(queueItem) {
				try {
					// 更新状态为删除中
					queueItem.status = 'deleting';
					queueItem.progress = 0;
					this.deletingCount++;
					this.updateDeleteStats();
					
					// 模拟删除进度动画
					const progressInterval = setInterval(() => {
						if (queueItem.status === 'deleting' && queueItem.progress < 80) {
							queueItem.progress += Math.random() * 15 + 5;
							if (queueItem.progress > 80) queueItem.progress = 80;
						}
					}, 200);
					
					// 调用单个文件删除API
					const result = await audioApi.realDeleteSingleAudio(queueItem.audioId);
					
					// 清除进度更新
					if (progressInterval) {
						clearInterval(progressInterval);
					}
					
					// 根据实际API返回结构判断：检查 database_success 字段
					


					if (result && result.database_success === true) {
						// 数据库删除成功就算删除成功（这是正确的判断字段！）
						queueItem.status = 'completed';
						queueItem.progress = 100;
						console.log(`✅ 删除成功: ${queueItem.name} - 数据库删除成功`);
						
						// 如果七牛云删除失败，只显示警告（不影响成功状态）
						if (result.qiniu_success === false && result.qiniu_error) {
							console.warn(`⚠️ ${queueItem.name} 七牛云删除失败: ${result.qiniu_error}`);
						}
					} else {
						// 数据库删除失败才算真正失败
						queueItem.status = 'failed';
						queueItem.progress = 0;
						queueItem.error = result.database_error || '数据库删除失败';
						console.log(`❌ 删除失败: ${queueItem.name} - ${queueItem.error}`);
					}
					
					console.log(`📊 最终状态: ${queueItem.name} = ${queueItem.status}`);
					
					this.deletingCount--;
					
				} catch (error) {
					// 删除失败
					if (progressInterval) {
						clearInterval(progressInterval);
					}
					queueItem.status = 'failed';
					queueItem.progress = 0;
					queueItem.error = error.message || '网络错误';
					this.deletingCount--;
					console.error('删除文件失败:', error);
				}
				
				// 更新统计
				this.updateDeleteStats();
				
				// 继续处理队列中的下一个文件
				this.startDeleteQueue();
				
				// 检查是否全部完成
				this.checkDeleteComplete();
			},
			
			// 更新删除统计
			updateDeleteStats() {
				// 调试：显示所有队列项的状态
				console.log('📋 队列状态详情:');
				this.deleteQueue.forEach((item, index) => {
					console.log(`  ${index}: ${item.name} - status: ${item.status}`);
				});
				
				const completedItems = this.deleteQueue.filter(item => item.status === 'completed');
				const failedItems = this.deleteQueue.filter(item => item.status === 'failed');
				
				console.log('✅ 已完成的项目:', completedItems.map(item => item.name));
				console.log('❌ 失败的项目:', failedItems.map(item => item.name));
				
				this.deleteStats = {
					total: this.deleteQueue.length,
					completed: completedItems.length,
					failed: failedItems.length,
					deleting: this.deleteQueue.filter(item => item.status === 'deleting').length,
					waiting: this.deleteQueue.filter(item => item.status === 'waiting').length
				};
				
				console.log('📊 统计结果:', this.deleteStats);
			},
			
			// 检查删除是否全部完成
			checkDeleteComplete() {
				const { total, completed, failed } = this.deleteStats;
				
				if (completed + failed === total) {
					// 全部删除完成
					if (failed === 0) {
						showSuccess(`删除完成！共${completed}个文件`);
					} else {
						showWarning(`删除完成：成功${completed}个，失败${failed}个`);
					}
					
					// 重新加载数据
					this.loadData();
				}
			},
			
			// 暂停删除
			pauseDelete() {
				this.deletePaused = true;
				// 将正在删除的文件标记为暂停
				this.deleteQueue.forEach(item => {
					if (item.status === 'deleting') {
						item.status = 'paused';
					}
				});
				this.deletingCount = 0;
				this.updateDeleteStats();
			},
			
			// 继续删除
			resumeDelete() {
				this.deletePaused = false;
				// 将暂停的文件重新标记为等待
				this.deleteQueue.forEach(item => {
					if (item.status === 'paused') {
						item.status = 'waiting';
					}
				});
				this.updateDeleteStats();
				this.startDeleteQueue();
			},
			
			// 取消删除
			cancelDelete() {
				this.deletePaused = true;
				this.deleteQueue = [];
				this.deletingCount = 0;
				this.deleteModalVisible = false;
				this.updateDeleteStats();
			},
			
			// 重试失败的删除
			retryFailedDeletes() {
				this.deleteQueue.forEach(item => {
					if (item.status === 'failed') {
						item.status = 'waiting';
						item.progress = 0;
						item.error = null;
					}
				});
				this.updateDeleteStats();
				this.startDeleteQueue();
			},
			
			// 移除单个删除项
			removeDeleteItem(queueItem) {
				const index = this.deleteQueue.findIndex(item => item.id === queueItem.id);
				if (index > -1) {
					this.deleteQueue.splice(index, 1);
					this.updateDeleteStats();
				}
			},
			
			// 获取删除状态文本
			getDeleteStatusText(status) {
				const statusMap = {
					waiting: '等待中',
					deleting: '删除中',
					completed: '已完成',
					failed: '失败',
					paused: '已暂停'
				};
				return statusMap[status] || status;
			},
			
			// 获取删除状态类型
			getDeleteStatusType(status) {
				const typeMap = {
					waiting: 'info',
					deleting: 'warning',
					completed: 'success',
					failed: 'danger',
					paused: 'info'
				};
				return typeMap[status] || 'info';
			}
		},

		onUnload() {
			// 页面卸载时清理音频资源
			globalAudioPlayer.destroy();
		}
	}
</script>

<style>
.audio-manage-container {
	background: #f5f7fa;
	min-height: 100vh;
	font-family: 'Helvetica Neue', Helvetica, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', '微软雅黑', Arial, sans-serif;
}

/* 头部工具栏 */
.header-toolbar {
	background: #fff;
	padding: 0 24px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	border-bottom: 1px solid #e4e7ed;
	height: 60px;
}

.toolbar-left {
	display: flex;
	align-items: center;
	gap: 16px;
}

.room-title {
	margin: 0;
	font-size: 20px;
	font-weight: 500;
	color: #303133;
}

.toolbar-actions {
	display: flex;
	gap: 12px;
}

/* 面包屑导航 */
.breadcrumb-nav {
	background: #fff;
	padding: 12px 24px;
	border-bottom: 1px solid #ebeef5;
}

.breadcrumb-clickable {
	cursor: pointer;
	transition: color 0.3s;
}

.breadcrumb-clickable:hover {
	color: #409eff;
}

/* 主体内容 */
.main-content {
	padding: 20px 24px;
}

/* 区域标题 */
.section-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 16px;
}

.section-header h3 {
	margin: 0;
	font-size: 16px;
	font-weight: 500;
	color: #303133;
	display: flex;
	align-items: center;
	gap: 8px;
}

.view-actions {
	display: flex;
	align-items: center;
	gap: 12px;
}

.selection-actions {
	display: flex;
	gap: 8px;
	margin-right: 12px;
	padding-right: 12px;
	border-right: 1px solid #e4e7ed;
}

/* 文件夹网格 */
.folder-section {
	margin-bottom: 24px;
}

.folder-grid {
	margin-bottom: 0;
}

.folder-card {
	cursor: pointer;
	transition: all 0.3s;
	margin-bottom: 16px;
	position: relative;
}

.folder-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.folder-card:hover .folder-actions {
	opacity: 1;
	visibility: visible;
}

.folder-content {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 8px;
	position: relative;
}

.folder-icon {
	font-size: 32px;
	color: #409eff;
}

.folder-info {
	flex: 1;
}

.folder-name {
	font-size: 14px;
	font-weight: 500;
	color: #303133;
	margin-bottom: 4px;
	cursor: text;
	border-radius: 4px;
	padding: 2px 4px;
	transition: all 0.3s ease;
}

.folder-name:hover {
	background-color: #f5f7fa;
	color: #409eff;
}

.folder-count {
	font-size: 12px;
	color: #909399;
}

/* 文件夹操作按钮 */
.folder-actions {
	position: absolute;
	top: 8px;
	right: 8px;
	opacity: 0;
	visibility: hidden;
	transition: all 0.3s ease;
	z-index: 10;
}

.folder-actions .el-button-group .el-button {
	padding: 4px 6px !important;
	font-size: 12px !important;
	border-radius: 4px !important;
	margin: 0 1px !important;
}

.folder-actions .el-button.el-button--primary {
	background-color: #409eff !important;
	border-color: #409eff !important;
}

.folder-actions .el-button.el-button--danger {
	background-color: #f56c6c !important;
	border-color: #f56c6c !important;
}

.folder-actions .el-button:hover {
	opacity: 0.8;
	transform: scale(1.05);
}

/* 音频表格 */
.audio-section {
	margin-bottom: 24px;
}

.audio-table {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.audio-name-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}

.audio-icon {
	color: #409eff;
	font-size: 16px;
}

.playing-tag {
	margin-left: 8px;
}

.danger-btn {
	color: #f56c6c;
}

.danger-btn:hover {
	color: #f56c6c;
}

/* 播放按钮样式 */
.play-button-text {
	font-size: 14px !important;
	padding: 8px 16px !important;
	border-radius: 6px !important;
	transition: all 0.3s ease;
	font-weight: 500 !important;
	min-width: 60px !important;
}

.play-button-text:hover {
	transform: scale(1.05);
}

/* 表格播放按钮不同状态样式增强 */
.play-button-text.el-button--success:hover {
	box-shadow: 0 2px 8px rgba(103, 194, 58, 0.4) !important;
}

.play-button-text.el-button--warning:hover {
	box-shadow: 0 2px 8px rgba(230, 162, 60, 0.4) !important;
}

/* 操作按钮样式 */
.action-btn {
	font-size: 14px !important;
	padding: 6px 10px !important;
	margin: 0 2px !important;
	border-radius: 4px !important;
	transition: all 0.3s ease;
}

.action-btn:hover {
	background-color: #f5f7fa !important;
}

.action-btn.danger-btn:hover {
	background-color: #fef0f0 !important;
	color: #f56c6c !important;
}

/* 音频网格 */
.audio-grid {
	margin-bottom: 0;
}

.audio-card {
	cursor: pointer;
	transition: all 0.3s;
	margin-bottom: 16px;
	overflow: hidden;
	border: 2px solid transparent;
}

.audio-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.audio-card.selected {
	border-color: #409eff;
	box-shadow: 0 4px 16px rgba(64, 158, 255, 0.3);
}

.audio-cover {
	position: relative;
	height: 120px;
	background: linear-gradient(135deg, #409eff, #67c23a);
	display: flex;
	align-items: center;
	justify-content: center;
}

.cover-icon {
	font-size: 32px;
	color: #fff;
}

.playing-badge {
	position: absolute;
	top: 8px;
	right: 8px;
}

.grid-checkbox {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 10;
	background: rgba(255, 255, 255, 0.9);
	border-radius: 4px;
	padding: 2px;
}

.card-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: rgba(0, 0, 0, 0.3);
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	transition: opacity 0.3s;
}

.audio-card:hover .card-overlay {
	opacity: 1;
}

.grid-play-btn {
	font-size: 12px !important;
	padding: 6px 12px !important;
	font-weight: 500 !important;
	border-radius: 20px !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
	transition: all 0.3s ease;
	border: none !important;
	backdrop-filter: blur(5px);
}

.grid-play-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
}

/* 网格播放按钮不同状态颜色覆盖 */
.grid-play-btn.el-button--success {
	background: rgba(103, 194, 58, 0.9) !important;
	color: #fff !important;
}

.grid-play-btn.el-button--warning {
	background: rgba(230, 162, 60, 0.9) !important;
	color: #fff !important;
}

.card-info {
	padding: 12px;
}

.card-name {
	font-size: 14px;
	color: #303133;
	font-weight: 500;
	margin-bottom: 6px;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.card-folder {
	margin-bottom: 6px;
}

.card-meta {
	font-size: 12px;
	color: #909399;
}

/* 空状态 */
.empty-state {
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

/* 底部播放器 */
.mini-player {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	background: #fff;
	border-top: 1px solid #ebeef5;
	padding: 12px 24px;
	display: flex;
	align-items: center;
	gap: 20px;
	z-index: 100;
	box-shadow: 0 -2px 12px rgba(0, 0, 0, 0.1);
}

.player-info {
	display: flex;
	align-items: center;
	gap: 12px;
	flex: 1;
}

.player-text {
	flex: 1;
}

.player-name {
	font-size: 14px;
	color: #303133;
	margin-bottom: 4px;
	font-weight: 500;
}

.player-progress {
	font-size: 12px;
	color: #909399;
}

.player-controls {
	display: flex;
	gap: 12px;
}

/* 播放器控制按钮样式 */
.player-control-btn-text {
	font-size: 14px !important;
	padding: 10px 20px !important;
	border-radius: 8px !important;
	transition: all 0.3s ease;
	font-weight: 500 !important;
	min-width: 70px !important;
}

.player-control-btn-text:hover {
	transform: scale(1.05);
}

/* 播放器按钮不同状态颜色增强 */
.player-control-btn-text.el-button--success:hover {
	box-shadow: 0 4px 12px rgba(103, 194, 58, 0.3) !important;
}

.player-control-btn-text.el-button--warning:hover {
	box-shadow: 0 4px 12px rgba(230, 162, 60, 0.3) !important;
}

.player-control-btn-text.el-button--info:hover {
	box-shadow: 0 4px 12px rgba(144, 147, 153, 0.3) !important;
}

/* 表单提示样式 */
.form-tip {
	font-size: 12px;
	color: #909399;
	margin-top: 4px;
	display: flex;
	align-items: center;
	gap: 4px;
}

.form-tip i {
	color: #409eff;
}

/* 移动弹窗特殊样式 */
.move-info {
	margin-bottom: 16px;
}

.folder-tree {
	max-height: 300px;
	border: 1px solid #ebeef5;
	border-radius: 4px;
	padding: 8px;
}

/* 右键菜单 */
.context-menu {
	padding: 0;
	margin: 0;
}

.context-menu .el-dialog__body {
	padding: 4px 0;
}

.context-menu .el-menu {
	border: none;
}

.context-menu .el-menu-item {
	padding: 0 16px;
	height: 32px;
	line-height: 32px;
	font-size: 12px;
	color: #606266;
}

.context-menu .el-menu-item:hover {
	background-color: #f5f7fa;
}

.context-menu .el-menu-item i {
	margin-right: 8px;
	font-size: 12px;
}

/* 上传进度弹窗样式 */
.upload-stats {
	background: #f8f9fa;
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
}

.stat-item {
	text-align: center;
	padding: 16px;
	background: #fff;
	border-radius: 6px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
	transition: all 0.3s ease;
}

.stat-item:hover {
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.stat-number {
	font-size: 28px;
	font-weight: bold;
	color: #303133;
	margin-bottom: 8px;
}

.stat-label {
	font-size: 14px;
	color: #909399;
}

.stat-item.completed .stat-number {
	color: #67c23a;
}

.stat-item.uploading .stat-number {
	color: #e6a23c;
}

.stat-item.failed .stat-number {
	color: #f56c6c;
}

.upload-controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 16px;
	background: #f8f9fa;
	border-radius: 8px;
}

.upload-controls .el-button {
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.upload-controls .el-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.upload-file-list {
	margin-bottom: 20px;
}

.upload-table {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.file-name-cell {
	display: flex;
	align-items: center;
	gap: 8px;
}

.file-icon {
	color: #409eff;
	font-size: 16px;
	flex-shrink: 0;
}

.progress-cell {
	display: flex;
	align-items: center;
	gap: 12px;
}

.progress-cell .el-progress {
	flex: 1;
}

.progress-text {
	font-size: 12px;
	color: #606266;
	font-weight: 500;
	min-width: 35px;
}

.error-list {
	margin-top: 20px;
	padding: 16px;
	background: #fef0f0;
	border-radius: 6px;
	border: 1px solid #fbc4c4;
}

.error-list h4 {
	margin: 0 0 12px 0;
	color: #f56c6c;
	font-size: 14px;
	font-weight: 500;
}

.error-detail {
	padding: 8px 0;
}

.upload-modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0 0 0;
	border-top: 1px solid #ebeef5;
	margin-top: 16px;
}

.footer-info {
	font-size: 14px;
	color: #606266;
}

.footer-info span {
	display: flex;
	align-items: center;
	gap: 8px;
}

/* 上传状态标签样式增强 */
.el-tag.el-tag--info {
	background-color: #f4f4f5;
	border-color: #e9e9eb;
	color: #909399;
}

.el-tag.el-tag--warning {
	background-color: #fdf6ec;
	border-color: #f5dab1;
	color: #e6a23c;
}

.el-tag.el-tag--success {
	background-color: #f0f9ff;
	border-color: #c1e1c1;
	color: #67c23a;
}

.el-tag.el-tag--danger {
	background-color: #fef0f0;
	border-color: #fbc4c4;
	color: #f56c6c;
}

/* 进度条样式增强 */
.el-progress-bar__outer {
	background-color: #ebeef5;
	border-radius: 10px;
	overflow: hidden;
}

.el-progress-bar__inner {
	border-radius: 10px;
	transition: width 0.3s ease;
}

/* 上传表格行悬停效果 */
.upload-table .el-table__row:hover {
	background-color: #f8f9fa;
}

/* 折叠面板样式优化 */
.el-collapse {
	border: none;
}

.el-collapse-item__header {
	background-color: #fff;
	border: 1px solid #ebeef5;
	border-radius: 4px;
	margin-bottom: 8px;
	padding: 0 16px;
	font-size: 13px;
}

.el-collapse-item__content {
	padding: 12px 16px;
	border: 1px solid #ebeef5;
	border-top: none;
	border-radius: 0 0 4px 4px;
	margin-top: -8px;
	background-color: #fafafa;
}

/* 真实删除按钮样式 */
.real-delete-btn {
	background: linear-gradient(135deg, #ff6b6b, #ee5a24) !important;
	border: none !important;
	color: #fff !important;
	font-weight: 600 !important;
	box-shadow: 0 4px 12px rgba(255, 107, 107, 0.4) !important;
	transition: all 0.3s ease !important;
}

.real-delete-btn:hover {
	background: linear-gradient(135deg, #ff5252, #d63031) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6) !important;
}

.real-delete-btn:active {
	transform: translateY(0) !important;
}

/* 真实删除确认弹窗样式 - 现代化设计 */
.real-delete-warning {
	display: flex;
	gap: 24px;
	margin-bottom: 32px;
	padding: 28px;
	background: linear-gradient(135deg, #fefefe 0%, #fff8f8 50%, #fef6f6 100%);
	border: 1px solid rgba(239, 68, 68, 0.1);
	border-radius: 16px;
	position: relative;
	box-shadow: 
		0 4px 6px -1px rgba(0, 0, 0, 0.1),
		0 2px 4px -1px rgba(0, 0, 0, 0.06),
		inset 0 1px 0 0 rgba(255, 255, 255, 0.8);
	backdrop-filter: blur(8px);
}

.real-delete-warning::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: linear-gradient(90deg, #ef4444, #dc2626, #b91c1c, #dc2626, #ef4444);
	background-size: 200% 100%;
	border-radius: 16px 16px 0 0;
	animation: gradientShift 3s ease-in-out infinite;
}

@keyframes gradientShift {
	0%, 100% { background-position: 0% 50%; }
	50% { background-position: 100% 50%; }
}

.warning-icon {
	width: 64px;
	height: 64px;
	font-size: 36px;
	color: #ef4444;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, #fef2f2, #fee2e2);
	border: 2px solid rgba(239, 68, 68, 0.1);
	border-radius: 50%;
	animation: floatPulse 3s ease-in-out infinite;
	box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
}

@keyframes floatPulse {
	0%, 100% { 
		transform: translateY(0) scale(1); 
		box-shadow: 0 4px 12px rgba(239, 68, 68, 0.15);
	}
	50% { 
		transform: translateY(-2px) scale(1.02); 
		box-shadow: 0 8px 20px rgba(239, 68, 68, 0.25);
	}
}

.warning-content {
	flex: 1;
	min-width: 0;
}

.warning-content h3 {
	margin: 0 0 20px 0;
	color: #1f2937;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
	background: linear-gradient(135deg, #dc2626, #ef4444);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
}

.warning-details p {
	margin: 0 0 16px 0;
	color: #374151;
	font-size: 15px;
	line-height: 1.6;
	font-weight: 500;
}

.warning-details strong {
	color: #111827;
	font-weight: 600;
}

.warning-details ul {
	margin: 16px 0 20px 0;
	padding-left: 0;
	list-style: none;
	display: grid;
	gap: 8px;
}

.warning-details li {
	padding: 12px 16px;
	color: #4b5563;
	font-size: 14px;
	font-weight: 500;
	display: flex;
	align-items: center;
	gap: 12px;
	background: rgba(255, 255, 255, 0.7);
	border: 1px solid rgba(0, 0, 0, 0.05);
	border-radius: 10px;
	transition: all 0.2s ease;
	backdrop-filter: blur(4px);
}

.warning-details li:hover {
	background: rgba(255, 255, 255, 0.9);
	transform: translateX(4px);
	border-color: rgba(239, 68, 68, 0.1);
}

.danger-notice {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: 20px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #fef2f2, #fee2e2);
	border: 1px solid rgba(239, 68, 68, 0.2);
	border-radius: 12px;
	color: #dc2626;
	font-weight: 600;
	font-size: 14px;
	box-shadow: 0 2px 4px rgba(239, 68, 68, 0.1);
}

.danger-notice i {
	font-size: 18px;
	animation: gentlePulse 2s ease-in-out infinite;
}

@keyframes gentlePulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50% { opacity: 0.7; transform: scale(0.95); }
}

.real-delete-form {
	margin: 32px 0;
	padding: 28px;
	background: linear-gradient(135deg, #ffffff 0%, #fafbfc 100%);
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 16px;
	box-shadow: 
		0 1px 3px rgba(0, 0, 0, 0.12),
		0 1px 2px rgba(0, 0, 0, 0.24),
		inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.real-delete-form .el-form-item__label {
	color: #1f2937 !important;
	font-weight: 600 !important;
	font-size: 15px !important;
}

.real-delete-form .el-input__inner {
	border-radius: 12px !important;
	border: 2px solid #e5e7eb !important;
	padding: 12px 16px !important;
	font-size: 14px !important;
	transition: all 0.3s ease !important;
	background: #ffffff !important;
}

.real-delete-form .el-input__inner:focus {
	border-color: #3b82f6 !important;
	box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.confirm-text-display {
	margin-top: 16px;
	padding: 16px 20px;
	background: linear-gradient(135deg, #f8fafc, #f1f5f9);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 12px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
}

.confirm-text-display strong {
	color: #1f2937;
	font-size: 15px;
	font-weight: 600;
}

.confirm-text-display code {
	display: block;
	margin-top: 12px;
	padding: 12px 16px;
	background: linear-gradient(135deg, #ffffff, #f9fafb);
	border: 1px solid #d1d5db;
	border-radius: 8px;
	font-family: 'SF Mono', 'Monaco', 'Consolas', 'Courier New', monospace;
	color: #dc2626;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.5px;
	box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05);
	position: relative;
}

.confirm-text-display code::before {
	content: '🔐';
	position: absolute;
	left: -8px;
	top: -8px;
	background: #dc2626;
	color: white;
	width: 24px;
	height: 24px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 12px;
	box-shadow: 0 2px 4px rgba(220, 38, 38, 0.3);
}

.input-status {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 12px;
	padding: 12px 16px;
	border-radius: 10px;
	font-size: 14px;
	font-weight: 600;
	transition: all 0.3s ease;
	backdrop-filter: blur(4px);
}

.input-status.status-valid {
	background: linear-gradient(135deg, #ecfdf5, #d1fae5);
	color: #059669;
	border: 1px solid #a7f3d0;
	box-shadow: 0 1px 3px rgba(5, 150, 105, 0.1);
}

.input-status.status-valid i {
	color: #10b981;
	animation: checkmark 0.5s ease;
}

@keyframes checkmark {
	0% { transform: scale(0); }
	50% { transform: scale(1.2); }
	100% { transform: scale(1); }
}

.input-status.status-invalid {
	background: linear-gradient(135deg, #fffbeb, #fef3c7);
	color: #d97706;
	border: 1px solid #fbbf24;
	box-shadow: 0 1px 3px rgba(217, 119, 6, 0.1);
}

.input-status.status-invalid i {
	color: #f59e0b;
	animation: shake 0.5s ease;
}

@keyframes shake {
	0%, 100% { transform: translateX(0); }
	25% { transform: translateX(-3px); }
	75% { transform: translateX(3px); }
}

.real-delete-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 24px 0 0 0;
	border-top: 1px solid rgba(0, 0, 0, 0.08);
	margin-top: 24px;
	position: relative;
}

.real-delete-footer::before {
	content: '';
	position: absolute;
	top: -1px;
	left: 0;
	right: 0;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1), transparent);
}

.footer-warning {
	display: flex;
	align-items: center;
	gap: 10px;
	color: #dc2626;
	font-size: 14px;
	font-weight: 600;
	padding: 8px 12px;
	background: linear-gradient(135deg, #fef2f2, #fee2e2);
	border: 1px solid rgba(220, 38, 38, 0.2);
	border-radius: 8px;
	box-shadow: 0 1px 3px rgba(220, 38, 38, 0.1);
}

.footer-warning i {
	font-size: 16px;
	animation: gentlePulse 2s ease-in-out infinite;
}

.footer-buttons {
	display: flex;
	gap: 16px;
}

.footer-buttons .el-button {
	padding: 14px 28px !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	border-radius: 12px !important;
	transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
	border: 2px solid transparent !important;
	position: relative !important;
	overflow: hidden !important;
}

.footer-buttons .el-button:not(.danger-confirm-btn) {
	background: linear-gradient(135deg, #f8fafc, #e2e8f0) !important;
	color: #475569 !important;
	border-color: #cbd5e1 !important;
}

.footer-buttons .el-button:not(.danger-confirm-btn):hover {
	background: linear-gradient(135deg, #e2e8f0, #cbd5e1) !important;
	color: #334155 !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.danger-confirm-btn {
	background: linear-gradient(135deg, #ef4444, #dc2626) !important;
	border-color: #ef4444 !important;
	color: #ffffff !important;
	position: relative !important;
	overflow: hidden !important;
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}

.danger-confirm-btn::before {
	content: '';
	position: absolute;
	top: 0;
	left: -100%;
	width: 100%;
	height: 100%;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
	transition: left 0.6s ease;
}

.danger-confirm-btn:hover:not(:disabled) {
	background: linear-gradient(135deg, #dc2626, #b91c1c) !important;
	transform: translateY(-2px) !important;
	box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4) !important;
}

.danger-confirm-btn:hover:not(:disabled)::before {
	left: 100%;
}

.danger-confirm-btn:active:not(:disabled) {
	transform: translateY(0) !important;
	box-shadow: 0 4px 14px rgba(239, 68, 68, 0.3) !important;
}

.danger-confirm-btn:disabled {
	background: linear-gradient(135deg, #e5e7eb, #d1d5db) !important;
	border-color: #d1d5db !important;
	color: #9ca3af !important;
	cursor: not-allowed !important;
	transform: none !important;
	box-shadow: none !important;
	opacity: 0.6 !important;
}

.danger-confirm-btn:disabled::before {
	display: none;
}

.danger-confirm-btn i {
	margin-right: 6px;
	font-size: 14px;
}

/* 弹窗整体优化 - 现代化玻璃拟态设计 */
.el-dialog__wrapper .el-dialog {
	background: rgba(255, 255, 255, 0.95) !important;
	backdrop-filter: blur(20px) !important;
	border-radius: 24px !important;
	border: 1px solid rgba(255, 255, 255, 0.2) !important;
	box-shadow: 
		0 32px 64px -12px rgba(0, 0, 0, 0.25),
		0 0 0 1px rgba(255, 255, 255, 0.05) inset,
		0 1px 0 0 rgba(255, 255, 255, 0.8) inset !important;
	overflow: hidden !important;
}

.el-dialog__header {
	padding: 32px 40px 0 40px !important;
	border-bottom: none !important;
	background: transparent !important;
}

.el-dialog__title {
	font-size: 20px !important;
	font-weight: 800 !important;
	color: #1f2937 !important;
	background: linear-gradient(135deg, #dc2626, #ef4444, #f97316);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	background-clip: text;
	position: relative;
	display: inline-block;
}

.el-dialog__title::after {
	content: '';
	position: absolute;
	bottom: -4px;
	left: 0;
	width: 100%;
	height: 2px;
	background: linear-gradient(135deg, #dc2626, #ef4444, #f97316);
	border-radius: 1px;
	opacity: 0.6;
}

.el-dialog__body {
	padding: 32px 40px !important;
	background: transparent !important;
}

.el-dialog__footer {
	padding: 0 40px 40px 40px !important;
	border-top: none !important;
	background: transparent !important;
}

/* 为整个弹窗添加精美的动画效果 */
.el-dialog__wrapper {
	backdrop-filter: blur(8px) !important;
}

.v-modal {
	background: rgba(0, 0, 0, 0.3) !important;
	backdrop-filter: blur(4px) !important;
}

/* 响应式设计优化 */
@media (max-width: 768px) {
	.el-dialog__wrapper .el-dialog {
		width: 95% !important;
		margin: 20px auto !important;
		border-radius: 16px !important;
	}
	
	.el-dialog__header,
	.el-dialog__body,
	.el-dialog__footer {
		padding-left: 24px !important;
		padding-right: 24px !important;
	}
	
	.real-delete-warning {
		flex-direction: column;
		text-align: center;
		padding: 20px;
	}
	
	.warning-icon {
		align-self: center;
	}
	
	.footer-buttons {
		flex-direction: column;
		gap: 12px;
		width: 100%;
	}
	
	.footer-buttons .el-button {
		width: 100% !important;
	}
}

/* 样式优化完成 */

/* 七牛云测试弹窗样式 */
.qiniu-test-dialog .el-message-box__message {
	white-space: pre-line;
	line-height: 1.6;
	font-size: 14px;
}

.qiniu-test-dialog .el-message-box__container {
	max-width: 500px;
}

.qiniu-test-dialog .el-message-box {
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.qiniu-test-dialog .el-message-box__header {
	background: linear-gradient(135deg, #f8f9fa, #e9ecef);
	border-radius: 12px 12px 0 0;
	padding: 20px 24px 16px 24px;
}

.qiniu-test-dialog .el-message-box__title {
	font-weight: 600;
	font-size: 16px;
}

.qiniu-test-dialog .el-message-box__content {
	padding: 20px 24px;
}

.qiniu-test-dialog .el-message-box__btns {
	padding: 12px 24px 20px 24px;
}

.qiniu-test-dialog .el-button--primary {
	background: linear-gradient(135deg, #409eff, #1890ff);
	border: none;
	border-radius: 8px;
	padding: 12px 24px;
	font-weight: 500;
}

/* 删除进度弹窗样式 */
.delete-stats {
	background: linear-gradient(135deg, #fff5f5, #fef2f2);
	border-radius: 8px;
	padding: 20px;
	margin-bottom: 20px;
	border: 1px solid #fecaca;
}

.stat-item.deleting .stat-number {
	color: #f56c6c;
}

.delete-controls {
	display: flex;
	justify-content: center;
	gap: 12px;
	margin-bottom: 20px;
	padding: 16px;
	background: #fef5f5;
	border-radius: 8px;
	border: 1px solid #fde2e2;
}

.delete-controls .el-button {
	font-size: 14px;
	padding: 10px 20px;
	border-radius: 6px;
	font-weight: 500;
	transition: all 0.3s ease;
}

.delete-controls .el-button:hover {
	transform: translateY(-1px);
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.delete-file-list {
	margin-bottom: 20px;
}

.delete-table {
	border-radius: 6px;
	overflow: hidden;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

.delete-progress-cell {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 8px 0;
}

.single-progress {
	flex: 1;
}

.single-progress .el-progress-bar {
	padding: 0;
}

.single-progress .el-progress-bar__outer {
	height: 10px;
	border-radius: 5px;
	background-color: #ebeef5;
}

.single-progress .el-progress-bar__inner {
	border-radius: 5px;
	transition: width 0.3s ease;
}

.progress-text {
	font-size: 12px;
	color: #606266;
	font-weight: 500;
	min-width: 35px;
	text-align: center;
}

.delete-modal-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 16px 0 0 0;
	border-top: 1px solid #ebeef5;
	margin-top: 16px;
}

.delete-modal-footer .footer-info {
	font-size: 14px;
	color: #606266;
	display: flex;
	align-items: center;
	gap: 8px;
}

.delete-modal-footer .footer-info i {
	font-size: 16px;
}

.delete-modal-footer .footer-info .el-icon-warning {
	color: #e6a23c;
	animation: pulse 1.5s infinite;
}

.delete-modal-footer .footer-info .el-icon-success {
	color: #67c23a;
}

/* 删除表格行悬停效果 */
.delete-table .el-table__row:hover {
	background-color: #fef5f5;
}
</style>
